<template>
  <el-dialog
    :model-value="dialogSelectVisible"
    title="选择品牌"
    @close="cancelFn"
  >
    <div>
      <el-input
        style="width: 30%"
        v-model="selData.keyword"
        class="w-50 m-2"
        placeholder="品牌名称搜索"
      >
        <template #suffix>
          <el-icon class="el-input__icon" @click="queryList"
            ><search
          /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="专题名称" />
        <el-table-column label="所属分类" prop="categoryName"></el-table-column>
        <el-table-column label="价格" prop="createTime">
          <template #default="{ row }">
            {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationParams.currentPage"
        v-model:page-size="paginationParams.pageSize"
        layout="prev, pager, next"
        :total="paginationParams.total"
        :background="true"
        @current-change="handleCurrentChange"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";

import * as http from "@/request/http";
import { ElMessage, ElMessageBox, dayjs } from "element-plus";
import useTable from "@/hooks/components/useTable";

// 发送的参数
const selData = reactive({
  keyword: "",
});
const prop = withDefaults(
  defineProps<{
    dialogSelectVisible: boolean;
    apiNumber: number;
  }>(),
  {
    dialogSelectVisible: false,
    apiNumber: 1,
  }
);

// 调用useTable函数  实现table数据渲染 以及 分页器功能
const { tableData, paginationParams, handleCurrentChange, queryList } =
  useTable(http.homeSubject.getSubjectList, selData);
const emits = defineEmits<{
  (e: "cancel"): void;
  (e: "confirm"): void;
}>();

// 取消
const cancelFn = () => {
  emits("cancel");
};
// 确定
const confirmFn = () => {
  ElMessageBox.confirm("使用要进行添加操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (prop.apiNumber == 1) {
        http.homeSubject
          .postCreateHomeRecSub(multipleSelection.value)
          .then((res) => {
            if (res.code === 200) {
              ElMessage.success("添加成功");
            } else {
              ElMessage.error("添加失败");
            }
          })
          .catch((err) => {
            ElMessage.error("添加失败", err);
          });
      } else {
        http.homeHot
          .homeRecProCreate(multipleSelection.value)
          .then((res) => {
            if (res.code === 200) {
              ElMessage.success("添加成功");
            } else {
              ElMessage.error("添加失败");
            }
          })
          .catch((err) => {
            ElMessage.error("添加失败", err);
          });
      }
      emits("confirm");
    })
    .catch(() => {});
};

// 选中的
const multipleSelection = ref([]);
// 多选
const handleSelectionChange = (val: any) => {
  // multipleSelection.value = val;
  multipleSelection.value = val.map((item: { id: number; name: string }) => {
    return {
      productId: item.id,
      productName: item.name,
    };
  });
  console.log(multipleSelection.value);
  // console.log(multipleSelection.value);
};
</script>

<style scoped lang="less">
.pagination-box {
  width: 500px;
  float: right;
}
</style>
